<!--
 * @Author: wwj 3342930399@qq.com
 * @Date: 2024-03-12 11:41:16
 * @LastEditors: wwj 3342930399@qq.com
 * @LastEditTime: 2024-03-12 11:51:18
 * @FilePath: \vue\src\components\vxeTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 表格组件 -->
<template>
  <div class="vxe-tbale">
    <vxe-grid
      v-bind="OptionsCurrent"
      max-height="30000"
      show-header-overflow
      show-overflow
      highlight-hover-row
      @checkbox-change="checkboxChange"
      @checkbox-all="selectAllCheckboxChange"
      :seq-config="{ startIndex: OptionsCurrent.params.offset }"
      @sort-change="sortChange"
      :sort-config="{
        trigger: 'cell',
        orders: ['asc', 'desc'],
        sortMethod: onSortCurrent,
      }"
    >
      <template
        v-for="column in columns"
        :slot="column.slots ? column.slots.default : ''"
        slot-scope="{ row }"
      >
        <slot
          :sortable="column.sortable"
          :name="column.slots ? column.slots.default : ''"
          :scope="row"
        ></slot>
      </template>
      <template #pager>
        <rbd-pagination
          :params="OptionsCurrent.pagenationParams"
          @emitPagenationParams="getPagenationParamsCurrent"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import RbdPagination from "./pagination.vue";
export default {
  components: {
    RbdPagination,
  },
  watch: {
    datalist: {
      handler(newVals) {
        this.OptionsCurrent = {
          ...this.OptionsCurrent,
          data: newVals,
        };
      },
      deep: true,
    },
    columns: {
      handler(newVals) {
        this.OptionsCurrent = {
          ...this.OptionsCurrent,
          columns: newVals,
        };
      },
      deep: true,
    },
    pagination: {
      handler(newVals) {
        this.OptionsCurrent = {
          ...this.OptionsCurrent,
          pagenationParams: {
            ...this.OptionsCurrent.pagination,
            ...newVals,
          },
        };
      },
      deep: true,
    },
  },
  props: {
    datalist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    height: {
      type: String,
      default: "500",
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          total: 1,
          currentPage: 1,
          defaultPageSize: 10,
          pageSize: 10,
          pageSizeOptions: ["10", "20", "50", "100"],
        };
      },
    },
    pageChange: {
      type: Function,
      default: null,
    },
    checkboxFun: {
      type: Function,
      default: null,
    },
    sortableFun: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      store: {
        selectedRowKeys: [],
        selectData: [],
      },
      allAlign: "left",
      OptionsCurrent: {
        border: "inner",
        resizable: false,
        showOverflow: true,
        loading: false,
        columns: [],
        height: "auto",
        pagenationParams: {
          total: 1,
          currentPage: 1,
          pageSize: 10,
          defaultPageSize: 10,
          pageSizeOptions: ["10", "20", "50", "100"],
        },
        params: {
          sort: "",
          order: "",
          offset: 0,
          limit: 10,
        },
        data: [],
      },
    };
  },
  created() {
    this.OptionsCurrent = {
      ...this.OptionsCurrent,
      columns: this.columns,
      data: this.datalist,
    };
    this.OptionsCurrent.pagenationParams = {
      ...this.OptionsCurrent.pagenationParams,
      ...this.pagination,
    };
  },
  mounted() {},
  methods: {
    // onSelect  (item, checked){
    //     if (checked) {
    //       store.selectData.push(cloneDeep(item));
    //     } else {
    //       store.selectData.forEach(function (element, index) {
    //         if (item[props.rowKey] == element[props.rowKey]) {
    //           store.selectData.splice(index, 1);
    //         }
    //       });
    //     }
    //     store.selectedRowKeys = store.selectData.map(function (element) {
    //       return element[props.rowKey];
    //     });
    //   },
    //   nSelectAll = (checked: boolean, _params, params2: any): void => {
    //     if (checked) {
    //       store.selectData.push(...cloneDeep(params2));
    //     } else {
    //       let keys = params2.map(function (element) {
    //         return element[props.rowKey];
    //       });
    //       store.selectData = store.selectData.filter(function (element) {
    //         return !!!keys.includes(element[props.rowKey]);
    //       });
    //     }
    //     store.selectedRowKeys = store.selectData.map(function (element) {
    //       return element[props.rowKey];
    //     });
    //   };
    onSortCurrent({ property, order }) {},
    sortChange({ property, order }) {
      this.sortableFun(property, order);
    },
    //接收分页参数
    getPagenationParamsCurrent(params) {
      const that = this;
      that.OptionsCurrent.params = {
        ...that.OptionsCurrent.params,
        ...{
          offset: (params.currentPage - 1) * params.pageSize,
          limit: params.pageSize,
        },
      };
      that.OptionsCurrent.pagenationParams = params;
      that.pageChange(params);
    },
    checkboxChange(e) {
      this.checkboxFun(e.$table.getCheckboxRecords());
    },
    selectAllCheckboxChange(e) {
      this.checkboxFun(e.$table.getCheckboxRecords());
    },
  },
};
</script>

<style lang="scss" scoped>
.vxe-tbale {
  height: auto;
}
::v-deep {
  .vxe-table--body-wrapper.body--wrapper {
    height: auto !important;
    // overflow-x: visible;
    overflow-y: visible;
  }
}
</style>
